<template>
	<section>
		<main>
			<mt-header fixed title="系统消息">
                <router-link to="/mine" slot="left">
                    <mt-button icon="back"> </mt-button>
                </router-link>
			</mt-header>
			<div class="list">
				<ul
				class="ml10 mr10 mt50"
				v-infinite-scroll="loadMore"
				infinite-scroll-disabled="loading"
				infinite-scroll-distance="50">
					<li
						class="shadow bgwhite pl10 pr10 mt10 pt5 pb5"
						:key="idx"
						v-for="(item,idx) in data">
						<router-link :to="{path:'/news/detail',query: {id:item.id}}">
							<h4 class="lh30 tl fs14">{{item.pushTopic}}<span class="fr fontc3 fs12">{{idx+1}}</span></h4>
							<p class="lh20 tl fontc2">{{item.pushContent}}</p>
							<p class="tl lh20 mt5 fontc3">{{item.createTime}}</p>
						</router-link>
					</li>
				</ul>
				<p class="pl15 pr15" v-show="loading">
					<mt-spinner :type="2" color="#333"></mt-spinner>
				</p>
			</div>
		</main>
	</section>
</template>
<script>

import {MessageBox,Toast,Indicator,InfiniteScroll,Spinner} from 'mint-ui'

import Vue from 'vue';
Vue.use(InfiniteScroll);


export default {
	name: "News",
	data () {
		return {
			data : [],
			page : 0,
			loading : false,
			axiosKey : true,
		}
	},
	created () {
		this.getNewsList();
	},
	methods : {
		getNewsList () {
			if (!this.axiosKey) {
				return
			};
			this.axiosKey = false;
			this.loading = true;
			axios({
				methods: "get",
				url: '/user/news/loadNews.do',
				params: {
					page: this.page,
					pageSize: 10,
					pushType: 2,
				}
			})
			.then((res) => {
				res = res.data;
				if (res.code == 200) {
					res.data.forEach((value) => {
						this.data.push(value);
					})
				} else {
					Toast(res.msg);
				}
			})
			.then(() => {
				this.axiosKey = true;
				this.page += 1;
				this.loading = false;
			})
		},
		loadMore() {
			this.loading = true;
			this.getNewsList();
		},
		goBack () {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
		}
	},

}
</script>
<style scoped>
	li {
		border-radius: 5px;
	}
	p {
		display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	}
</style>










